<template>
  <div class="login-container">
    <h2>请选择登录方式</h2>
    
    <div class="user-type-select">
      <button 
        v-for="type in ['individual', 'group']"
        :key="type"
        @click="userType = type"
        :class="{ active: userType === type }"
      >
        {{ type === 'individual' ? '个人登录' : '小组登录' }}
      </button>
    </div>

    <div v-if="userType === 'group'">
      <h3>请选择小组成员</h3>
      <div class="member-grid">
        <div
          v-for="member in members"
          :key="member"
          class="member-item"
          :class="{ selected: selectedMembers.includes(member) }"
          @click="toggleMember(member)"
        >
          {{ member }}
        </div>
      </div>
    </div>

    <div class="confirm-button">
      <button @click="handleLogin">确定</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import io from 'socket.io-client'

const userType = ref('individual')
const members = ref([])
const selectedMembers = ref([])
const router = useRouter()
const socket = io('http://localhost:3000')

const toggleMember = (member) => {
  const index = selectedMembers.value.indexOf(member)
  if (index === -1) {
    selectedMembers.value.push(member)
  } else {
    selectedMembers.value.splice(index, 1)
  }
}

const handleLogin = () => {
  // 处理登录逻辑
  router.push('/student')
}

socket.on('names', (names) => members.value = names)
onUnmounted(() => socket.disconnect())
</script>

<style scoped>
.login-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
}

.user-type-select {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

.user-type-select button {
  padding: 0.8rem 2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.user-type-select button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.member-item {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.member-item.selected {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.confirm-button {
  margin-top: 2rem;
}

.confirm-button button {
  padding: 0.8rem 3rem;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
}
</style>